<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/hanzimu.css">
  <title>22003170129韩梓慕</title>
</head>

<body>
  <header>
    <nav class="han-head">
        <div class="han-top">
          <div id="han-logo"><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html"></a></div>
          <!-- 顶部导航栏 -->
          <ul class="han-list">
              <li><a href="#" class="han-item active">发现音乐</a></li>
              <li><a href="#">我的音乐</a></li>
              <li><a href="#">关注</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fifth.html">商城</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/sixth.html">音乐人</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fourth.html">个人设置</a></li>
              <li class="han-hot"></li>
          </ul>
          <!-- 右侧搜索框以及用户登录区域 -->
          <ul class="han-right-list">
            <li class="han-search-wrap"><input type="search" placeholder="音乐/视频/电台/用户"></li>
            <li><a href="#">创作者中心</a></li>
            <li><a href="#">登录</a></li>
          </ul>
        </div>
    </nav>

    <nav class="han-middle-nav">
        <div class="han-inner">
            <ul>
            <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/second.html">推荐歌单</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="">云推歌</a></li>
            <li><a href="#">主播电台</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </nav>
</header>

  <han-three-page-main>
    <div class="han-song-left">
      <img src="./img/ButterFly.jpg" alt="歌曲封面">
      <div class="han-song-details">
        <h2>《示例歌曲》</h2>
        <p>歌手：示例歌手</p>
        <p>所属专辑：示例专辑</p>
        <p>发布时间：2022/02/21</p>
        <button>更改歌词颜色</button>
        <audio controls id="han-song-player">
          <source src="" type="">
        </audio>
      </div>
    </div>

    <div class="han-song-middle">
      <h2>歌词</h2>
      <p>
        示例歌词第一行
        <br>
        示例歌词第二行
        <br>
        示例歌词第三行
        <br>
        示例歌词第四行
        <br>
        示例歌词第五行
        <br>
        示例歌词第六行
        <br>
        示例歌词第七行
      </p>
    </div>

    <div class="han-song-right">
      <h3>评论</h3>


      
    </div>
  </han-three-page-main>

  <footer>
    <p>&copy; 2024 网易云音乐示例版权所有</p>
  </footer>

  <script>
    
    //构造json对象
    var json = [
      {"pic":"./img_3/nature-1.jpg","user": "示例用户1","comment": "这首歌真的太好听了，每次听都有不同的感受！"},
      {"pic":"./img_3/nature-2.jpg","user": "示例用户2","comment": "歌手的嗓音很独特，把这首歌演绎得淋漓尽致。"},
      {"pic":"./img_3/nature-3.jpg","user": "示例用户3","comment": "这首歌的旋律很适合在夜晚听，让我想起了小时候的美好时光。"}
    ];

    var comments = document.querySelector('.han-song-right'); // 选择评论区域 
    function addRow(row){
        var element=document.createElement("ul");  //创建一个ul元素
        var es6_hang=`<div class="han-song-comment"><img src="${row.pic}"><div><p>${row.user}</p><p>${row.comment}</p></div></div>`;
        
        element.innerHTML=es6_hang;  //将es6_hang里的内容添加到element里
        comments.appendChild(element);  //追加element到comments里
    }
    for(var i=0;i<json.length;i++){
          addRow(json[i]);  //添加json里的数据
        }


    var comments = document.getElementsByClassName('han-song-right');
    var changeColorButton = document.querySelector('.han-song-left button');
    var lyricsElement = document.querySelector('.han-song-middle p');
    
    var currentColorIndex = 0;
    const colors = ['red','purple','green','blue','black' ];

    changeColorButton.addEventListener('click', function () {
      // 根据当前颜色索引切换歌词颜色
      lyricsElement.style.color = colors[currentColorIndex];

      // 更新颜色索引，实现循环切换
      currentColorIndex = (currentColorIndex + 1) % colors.length;
    });
    
  </script>
</body>
</html>